import { FC, useState } from 'react';
import { Card, Space, Button } from 'antd';
// 从富文本组件里面去引入Editor组件
import { Editor } from 'react-draft-wysiwyg';
import { EditorState, convertToRaw } from 'draft-js';
// 将内容转成html代码
import draftToHtml from 'draftjs-to-html';

import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

const Index: FC = () => {
  const [editorState, setEditorState] = useState(EditorState.createEmpty());
  const onEditorStateChange = (editorState: any) => {
    setEditorState(editorState);
  };
  const upload = () => {
    console.log(draftToHtml(convertToRaw(editorState.getCurrentContent())));
  };
  return (
    <Space direction="vertical" style={{ display: 'flex' }}>
      <Card title="富文本编辑框">
        <Editor
          editorState={editorState}
          wrapperClassName="demo-wrapper"
          editorClassName="demo-editor"
          onEditorStateChange={onEditorStateChange}
        />
        <textarea
          style={{ width: '100%', height: 300 }}
          disabled
          value={draftToHtml(convertToRaw(editorState.getCurrentContent()))}
        />
        <Button onClick={upload}>上传</Button>
        <div
          dangerouslySetInnerHTML={{
            __html: draftToHtml(convertToRaw(editorState.getCurrentContent())),
          }}
        ></div>
      </Card>
    </Space>
  );
};

export default Index;
